<template>
  <div class="container">
    <div class="area">
      <!--
      1.
      2. rules 配置“标星”的校验规则： rules.prop： 表单模式下的合法性校验标记，ref 通过该属性选择指定的表单
      -->
      <!-- model：表单检验时必填。 因为在表单检验时，校验器获取的值为：model.prop，该值需要和v-model绑定的值一样，
       否则校验规则一直提示该属性不能为空。 ref：标识需要校验的组件 ，rules 校验使用的规则   -->

      <!--
      【表单组件，提供了一个可扩展的数据校验逻辑】
      （慎重思考）
      1. model 表单对象
      2. rules 表单校验规则
      3. ref 表单快速选择对象
      4. v-model 双向绑定。（是否会和model冲突？？ 经验证：v-model 是必须存在的，否则输入不了数据 ）

      当无法是用v-model进行数据绑定的时候，可以直接修改model绑定的数据对象里面的值，同校验规则（rule）的prop属性保持一致即可完成数据校验

      双向绑定的合规性校验是不是校验 model属性中的同属性的值呢？？ 是的！
      -->

      <el-form :model="form" ref="checkForm" :rules="rules" label-width="80px">
        <el-form-item label="轮播图" prop="bannerUrl">
          <el-upload
            class="avatar-uploader"
            :action="uploadServer"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imgPrefx + imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="轮播图排序" prop="sort" label-width="120px">
          <el-input v-model="form.sort" placeholder="商品排序"/>
        </el-form-item>
        <el-form-item label="跳转类型" prop="jumpType" label-width="120px">
          <!--todo  当 v-model 的值等于下拉框的value值时，该选项被选中-->
          <el-select v-model="form.jumpType" placeholder="请选择资源跳转类型" clearable @change="choseSourceType">
            <el-option label="商品资源" value="0"/>
            <el-option label="文章资源" value="1"/>
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="链接文章标识" prop="sourceName" label-width="120px">
                  <el-input v-model="form.sourceName" placeholder="链接文章"/>
                </el-form-item>-->
        <el-form-item label="关联资源" prop="sourceId" label-width="120px">
          <el-select v-model="form.sourceId" placeholder="请选择关联文章" clearable @change="wenzhangChange">
            <el-option
              v-for="dict in sources"
              :key="dict.id"
              :label="dict.title"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </div>
  </div>
</template>
<script>


/* 编辑器配置项 */
import {
  getMiniBanner,
  addMiniBanner,
  getWenzhangs,
  getGoods
} from '@/api/mini/banner'
import config from '@/utils/config'

export default {
  name: 'BannerEditor',
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      uploadServer: config.uplaodServer,
      imgPrefx: config.imgPrefx,
      sources: [], // 计算后可供选择的资源列表
      allGoods: [], // 系统中所有的商品列表
      allWenzs: [], // 系统中所有的文章列表
      imageUrl: '',
      form: {
        id: '',
        bannerUrl: '',
        jumpType: '',
        sourceId: '',
        sourceName: '',
        sort: ''
      },
      rules: {
        sourceId: [
          { required: true, message: '关联资源不能为空', trigger: 'blur' }
        ],
        bannerUrl: [
          { required: true, message: '轮播图不能为空', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '商品排序不能为空', trigger: 'blur' }
        ],
        jumpType: [
          { required: true, message: '跳转类型不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 获取路由传值
    var _this = this
    _this.paramsId = _this.$route.params.keyId

    // todo 初始化列表选项（需要注意异步带来的数据先后顺序不一致问题）
    getWenzhangs({}).then(res => {
      if (res.code == 200) {
        _this.allWenzs = res.data
      }
      getGoods({}).then(res => {
        if (res.code == 200) {
          var goods = new Array()
          for (var i = 0; i < res.data.length; i++) {
            var obj = new Object()
            obj['id'] = res.data[i].id
            obj['title'] = res.data[i].name
            goods.push(obj)
          }
          _this.allGoods = goods
        }

        // id 存在，说明为更新操作
        if (_this.paramsId) {
          getMiniBanner(_this.paramsId).then(function(res) {
            if (200 === res.code) {
              const data = res.data
              // 判断资源类型
              if (data.jumpType == 0) { // 商品类型资源
                _this.form.jumpType = '0'
                _this.sources = _this.allGoods
              }
              if (data.jumpType == 1) { // 文章类型资源
                _this.form.jumpType = '1'
                _this.sources = _this.allWenzs
              }

              _this.imageUrl = data.bannerUrl

              _this.form.id = data.id
              _this.form.bannerUrl = data.bannerUrl
              // todo 【说明】： 下拉框进行回显时，id 的属性必须一致，例如："123" 和 123 的时候，就不会回显 lable 的值
              _this.form.sourceId = data.sourceId
              _this.form.sourceName = data.sourceName
              _this.form.sort = data.sort
              _this.form.createUser = data.createUser
              _this.form.updateUser = data.updateUser
              _this.form.createTime = data.createTime
              _this.form.updateTime = data.updateTime
            }
          })
        } else {
          // 新增操作
          // 默认展示商品列表
          _this.form.jumpType = '0'
          _this.sources = _this.allGoods
        }
      })
    })
  },
  mounted() {

  },
  methods: {
    /**
     * 当选中不同的类型的时候，隐藏非该类型下的资源
     */
    choseSourceType(id) {
      var _this = this
      if (id == 0) { // 商品类型资源
        _this.sources = _this.allGoods
      } else if (id == 1) { // 文章类型资源
        _this.sources = _this.allWenzs
      } else {
        console.error('资源类型不存在', id)
      }
    },
    // 事件回调时的id ， v-mode绑定的值（selectedValue）， 都是选中时的value值
    wenzhangChange(id) {
      var _this = this
      for (var i = 0; i < _this.sources.length; i++) {
        if (_this.sources[i].id == id) {
          _this.form.sourceId = id
          _this.form.sourceName = _this.sources[i].title
          break
        }
      }
    },
    handleAvatarSuccess(res, file) {
      //this.imageUrl = URL.createObjectURL(file.raw)
      this.form.bannerUrl = res.msg
      this.imageUrl = res.msg
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    submitForm() {
      var _this = this
      _this.$refs['checkForm'].validate(valid => {
        if (valid) {
          addMiniBanner(this.form).then(response => {
            console.log(response)
            if (200 === response.code) {
              _this.$message({
                showClose: true,
                message: '操作成功',
                type: 'success'
              })
              setTimeout(function() {
                _this.$router.push('/mini/banner')
              }, 200)
            }
          })
        }
      })
    }
  },
  beforeDestroy() {

  }
}
</script>
<style scoped>
.container {
  width: 100%;
  /*border: solid 1px red;*/
  display: flex;
  justify-content: center;
}

.area {
  margin-top: 10px;
  width: 90%;
  /* border: solid 1px blue;*/
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>


